<template>
  <div class="orderContent flex flex_column">
    <div class="tagList">
      <div class="listNav flex">
        <span class="pointer" @click="shrinkZz">
          <i v-if="isZzShow" class="el-icon-arrow-down" />
          <i v-else class="el-icon-arrow-up" />
        </span>
        <span class="f16 ml15 fw">订单客户资质</span>
      </div>
      <div v-if="isZzShow" class="fileTable">
        <div class="border lastTdNoBorder">
          <el-table
            :data="intelligenceList"
            border
            fit
            style="width: 100%"
          >
            <el-table-column
              prop="certificationName"
              label="文件名称"
              min-width="100"
            />
            <el-table-column
              prop="certificationTypeName"
              label="资质类型"
              min-width="100"
            />
            <el-table-column
              prop="fileTypeName"
              label="文件类型"
              min-width="100"
            />
            <el-table-column
              prop="fileSize"
              label="文件大小"
              min-width="100"
            >
              <template scope="{row}">
                {{ convertBytes(row.fileSize) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="uploadFileTime"
              label="上传时间"
              min-width="100"
            >
              <template scope="{row}">
                {{ row.uploadFileTime || '--' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="uploadPersonName"
              label="上传人员"
              min-width="100"
            >
              <template scope="{row}">
                {{ row.uploadPersonName || '--' }}
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="70">
              <template slot-scope="scope">
                <div>
                  <el-popover
                    :ref="`popover-${scope.$index}`"
                    placement="bottom-end"
                    popper-class="tableOp"
                    width="160"
                    :popper-options="{ boundariesElement: 'opBox', removeOnDestroy: true }"
                    trigger="click"
                  >
                    <div class="operation">
                      <ul>
                        <li @click="previewCertificationFile(scope.row)">预览</li>
                      </ul>
                      <ul>
                        <li @click="downloadFile(scope.row)">下载</li>
                      </ul>
                    </div>
                    <div slot="reference" class="opBox pointer"><span class="el-icon-more c_3F61F1" /></div>
                  </el-popover>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="tagList">
      <div class="listNav flex">
        <span class="pointer" @click="shrinkZl">
          <i v-if="isZlShow" class="el-icon-arrow-down" />
          <i v-else class="el-icon-arrow-up" />
        </span>
        <span class="f16 ml15 fw">客户资料</span>
      </div>
      <div v-if="isZlShow" class="fileTable">
        <div class="border lastTdNoBorder">
          <el-table
            :data="mateialList"
            border
            fit
            style="width: 100%"
          >
            <el-table-column
              prop="informationName"
              label="文件名称"
              min-width="100"
            />
            <el-table-column
              prop="informationTypeName"
              label="资料类型"
              min-width="100"
            />
            <el-table-column
              prop="fileTypeName"
              label="文件类型"
              min-width="100"
            />
            <el-table-column
              prop="fileSize"
              label="文件大小"
              min-width="100"
            >
              <template scope="{row}">
                {{ convertBytes(row.fileSize) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="uploadFileTime"
              label="上传时间"
              min-width="100"
            >
              <template scope="{row}">
                {{ row.uploadFileTime || '--' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="uploadPersonName"
              label="上传人员"
              min-width="100"
            >
              <template scope="{row}">
                {{ row.uploadPersonName || '--' }}
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="70">
              <template slot-scope="scope">
                <div>
                  <el-popover
                    :ref="`popover-${scope.$index}`"
                    placement="bottom-end"
                    popper-class="tableOp"
                    width="160"
                    :popper-options="{ boundariesElement: 'opBox', removeOnDestroy: true }"
                    trigger="click"
                  >
                    <div class="operation">
                      <ul>
                        <li @click="previewCertificationFileZL(scope.row)">预览</li>
                      </ul>
                      <ul>
                        <li @click="downloadFileZl(scope.row)">下载</li>
                      </ul>
                    </div>
                    <div slot="reference" class="opBox pointer"><span class="el-icon-more c_3F61F1" /></div>
                  </el-popover>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { formatbytes } from '@/utils'

export default {
  name: '',
  props: {
    orderNo: {
      type: String
    }
  },
  data() {
    return {
      isZzShow: true,
      isZlShow: true,
      intelligenceList: [], // 资质列表
      mateialList: [] // 资料列表
    }
  },
  created() {
    // 得到资质列表数据
    this.getIntelligencels()
    // 得到订单客户资料列表
    this.getMaterialList()
  },
  mounted() {
  },
  methods: {
    // 资料下载
    downloadFileZl(data) {
      const parmas = {
        informationID: data.informationID
      }
      this.$api.business.DownLoadInformationFile(parmas).then(res => {
        window.location.href = res
      })
    },
    // 资料预览
    previewCertificationFileZL(data) {
      const parmas = {
        informationID: data.informationID
      }
      this.$api.business.PreviewInformationFile(parmas).then(res => {
        window.open(res)
      })
    },
    // 订单资质下载
    downloadFile(data) {
      const parmas = {
        certificationID: data.certificationID,
        certificationCode: data.certificationCode
      }
      this.$api.business.DownLoadCertificationFile(parmas).then(res => {
        window.location.href = res
      })
    },
    // 订单客户资质预览
    previewCertificationFile(data) {
      const parmas = {
        certificationID: data.certificationID,
        certificationCode: data.certificationCode
      }
      this.$api.business.PreviewCertificationFile(parmas).then(res => {
        window.open(res)
      })
    },
    // 文件大小单位换算
    convertBytes(val) {
      return formatbytes(val)
    },
    // 控制文件内容层显示隐藏
    shrinkZz() {
      this.isZzShow = !this.isZzShow
    },
    shrinkZl() {
      this.isZlShow = !this.isZlShow
    },
    // 得到订单客户资料列表
    getMaterialList() {
      const parmas = {
        orderNo: this.orderNo
      }
      this.$api.business.QueryOrdersCustomersInformations(parmas).then(res => {
        this.mateialList = res
      })
    },
    // 得到资质列表数据
    getIntelligencels() {
      const parmas = {
        orderNo: this.orderNo
      }
      this.$api.business.QueryOrdersCustomersCertifications(parmas).then(res => {
        this.intelligenceList = res
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.orderContent {
  width: 100%;
  flex: 1;
}
.tagList {
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
  border: 1px solid #E6E6E6;
  margin-bottom: 16px;
  width: 100%;
  .listNav {
    height: 44px;
    padding: 0 14px;
    background: #f5f6f9;
    border-bottom: 1px solid #E6E6E6;
  }
  .fileTable{
    padding: 10px;
    .border{
      border: solid #EBEEF5;
      border-width: 0 1px 0 1px;
    }
  }
}
</style>
